<template>
	<div class="order">
		<van-tabs v-model="tabActive" sticky swipeable>
			<van-tab v-for="(item, index) in tabList" :key="index" :title="item.title">
				<van-pull-refresh v-model="item.isLoading" @refresh="onRefresh(item)" ref="refresh">
					<van-list
						v-model="item.loading"
						:finished="item.finished"
						:error.sync="item.error"
						finished-text="没有更多了"
						ref="list"
						@load="onLoad(item, true)"
					>
						<!--总计-->
						<div class="amount-count">
							<div class="left">过往记录</div>
							<div class="right">
								<p v-if="index === 0 || index === 1">收入：¥{{ item.subData.income | Fixed(2) }}</p>
								<p v-if="index === 0 || index === 2">支出：¥{{ item.subData.pay | Fixed(2) }}</p>
							</div>
						</div>

						<!--明细记录-->
						<div class="record-list">
							<div class="record-item" v-for="(record, recordIndex) in 4" :key="'r' + recordIndex">
								<div class="left">
									<i class="iconfont icon-butieshouru"></i>
									<i class="iconfont icon-butieshouru" v-if="record.scene === 0"></i>
									<i class="iconfont icon-weiquankoukuan" v-if="record.scene === 1"></i>
									<i class="iconfont icon-tixian1" v-if="record.scene === 2"></i>
									<i class="iconfont icon-tui" v-if="record.scene === 3"></i>
									<i class="iconfont icon-shouxufei" v-if="record.scene === 4"></i>
									<i class="iconfont icon-tui" v-if="record.scene === 5"></i>
									<div class="detail">
										<p class="type">{{ record.scene | sceneFilter }}</p>
										<p class="time">{{ record.createTime | dateFormat }}</p>
									</div>
								</div>
								<div class="right">
									<p class="add" v-if="record.scene === 0 || record.scene === 3 || record.scene === 5 || record.scene === 10">
										+{{ record.amount | Fixed(2) }}
									</p>
									<p class="reduce" v-if="record.scene === 1 || record.scene === 2 || record.scene === 4">
										-{{ record.amount | Fixed(2) }}
									</p>
								</div>
							</div>
						</div>

						<!--<van-skeleton-->
						<!--v-for="i in 3" :key="'i' + i"-->
						<!--:row-width="['100%', '90%']"-->
						<!--:row="2"-->
						<!--:loading="item.loading"-->
						<!--&gt;</van-skeleton>-->

						<div slot="item.error">
							<Empty src="../../assets/images/member/empty-member.png" offsetTop="117" emptyText="暂无资金明细"></Empty>
						</div>
					</van-list>
				</van-pull-refresh>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import { Empty } from '@/components';
import refresh from '../../utils/mixin/refresh';
import moment from 'moment';
export default {
	name: 'member-zichan',
	components: {
		'van-tabs': Tabs,
		'van-tab': Tab,
		// 'van-skeleton': Skeleton,
		Empty
	},
	data() {
		return {
			tabActive: 0,
			tabList: [
				{
					name: '全部'
				},
				{
					name: '收入'
				},
				{
					name: '支出'
				}
			],
			// 混入当前页面需要的参数
			params: {
				status: '',
				order: 'createTime',
				sort: 'desc'
			}
		};
	},
	created() {
		// 设置当前选中项
		if (this.$route.query.type) {
			this.tabActive = parseInt(this.$route.query.type) + 1;
		}
		// 请求服务接口
		this.service = this.$service.member.incomelog.page;
		// 为tab数据添加上商品列表数据
		this.tabList = this.tabList.map((e, index) => {
			return {
				title: e.name,
				loading: false,
				finished: false,
				error: false,
				goodsList: [],
				subData: {},
				isLoading: false,
				page: 1,
				index
			};
		});
		// 混入请求参数
		this.mixinParamsFn = (item, r) => {
			console.log(item);
			if (item.index == 0) {
				// 1全部
				this.params.type = 0;
			} else if (item.index == 1) {
				// 2 收入
				this.params.type = 1;
			} else if (item.index == 2) {
				// 3 支出
				this.params.type = 2;
			} else {
				// 删除请求参数
				delete this.params.type;
			}
			r(this.params);
		};
	},
	mixins: [refresh],
	filters: {
		sceneFilter(scene) {
			switch (scene) {
				case 0:
					return '补贴收入';
				case 1:
					return '维权扣款';
				case 2:
					return '补贴提现';
				case 3:
					return '提现失败退回';
				case 4:
					return '提现手续费';
				case 5:
					return '提现失败退回手续费';
				case 10:
					return '金币兑换现金';
				default:
					return '';
			}
		},
		dateFormat(val) {
			return moment(val).format('YYYY-MM-DD HH:mm:ss');
		}
	}
};
</script>

<style lang="scss" scoped>
.order {
	/* prettier-ignore */
	font-size: 14PX;
}
.van-list {
	min-height: 60vh;
	.amount-count {
		width: 100%;
		padding: 10px 38px;
		@include flexBox(space-between, center);
		.left {
			font-size: 28px;
			color: #171717;
		}
		.right {
			font-size: 24px;
			color: #717076;
		}
	}
	.record-list {
		padding: 0 34px;
		background: $color-white;
		.record-item {
			padding: 34px 0;
			border-top: 2px solid #e8e8e8;
			@include flexBox(space-between);
			&:first-child {
				border-top: none;
			}
			.left {
				display: flex;
				i {
					font-size: 70px;
				}
				.icon-butieshouru,
				.icon-tixian1 {
					color: $main-color;
				}
				.icon-weiquankoukuan {
					color: #347aff;
				}
				.icon-shouxufei {
					color: #43a8ff;
				}
				.icon-tixianshibaifanhuan {
					color: #f79d23;
				}
				.detail {
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.type {
						color: #171717;
						font-size: 28px;
						font-weight: 600;
					}
					.time {
						color: #717076;
						font-size: 22px;
					}
				}
			}
			.right {
				text-align: right;
				font-size: 22px;
				color: #717076;
				.add {
					color: $main-color;
					font-size: 32px;
					font-weight: 600;
				}
				.reduce {
					color: #221d2c;
					font-size: 32px;
					font-weight: 600;
				}
			}
		}
	}
}
.van-skeleton {
	background: $color-white;
	padding: 20px;
	.van-skeleton__content {
		padding-top: 0;
		@include flexBox(space-between, null, column);
		.van-skeleton__row {
			border-radius: 8px;
		}
	}
	.van-skeleton__avatar {
		border-radius: 16px;
	}
}
</style>
